<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
<button type="button" id="show">显示</button>
<button type="button" id="hide">隐藏</button>
<button type="button" id="showOrHide">显示/隐藏</button>
<div>
    <ul id="List">
        <li>c++</li>
        <li>java</li>
        <li>web</li>
    </ul>
</div>
<script type="text/javascript">
    let e = $("#List") ;
    $(function(){
        $("#show").click(function(){
            e.slideDown( 3000 );
        }) ;

        $("#hide").click(function(){
            e.slideUp( 3000) ;
        }) ;

        $("#showOrHide").click(function(){
            e.slideToggle( 3000 ) ;
        }) ;
    }) ;
</script>
</body>
</html>